<style lang="less">
  @import './my-project.less';
</style>

<template>
  <div class="my-project">
    <Card>
      <div class="clearfix">
        <Button class="add-btn" type="primary" @click="createProject">新增</Button>
      </div>
      <filter-board
        @on-screen="screenCondition"
        @on-clear="clearCondition"
        ></filter-board>
      <Table
        class="business-tmp-table"
        :columns="tableColumns"
        :data="tableData"
        :no-data-text="noData"
        ></Table>

      <div class="page-box">
        <Select
          @on-change="() => getTableData()"
          v-model="pageSize"
          class="page-box-size">
          <Option v-for="item in pageSizeList" :key="item" :value="item" :label="`${item}条/页`">
            {{item}}条
          </Option>
        </Select>
        <Page
          show-elevator
          show-total
          :current="page"
          :total="pageTotal"
          :page-size="pageSize"
          class="page-box-page"
          @on-change="(number) => getTableData(number)"></Page>
      </div>
    </Card>
    <Modal
      class="project-test-modal"
      v-model="testProJectModal"
      title="上传样本"
      :mask-closable="false"
      :transfer="false"
      :closable="false"
      >
      <Upload
        multiple
        type="drag"
        action=""
        :before-upload="getUploadData">
        <div style="padding: 80px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p style="padding-bottom: 20px;">将文件拖拽至此处或点击上传</p>
          <p v-if="file"><b>待上传文件：</b>{{ file.name || '' }}</p>
        </div>
      </Upload>
      <p style="text-align: center">仅支持上传.excel文件，且文件不超过10MB，<a>样例下载</a></p>
      <div class="upload-footer" slot="footer">
        <Button type="text" @click="cancelUpload">取消</Button>
        <Button type="primary" @click="certainUpload" :loading="updateLoad">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { showMessageTip } from '@/libs/util'
import { getProjectList, deleteProjectById, testProject } from '../../../api/my-project.js'
import filterBoard from '../components/filter-board'
export default {
  name: 'project_list',
  data () {
    return {
      condition: {}, // 筛选框内容
      tableColumns: [],
      tableData: [],
      noData: '加载中...',
      selectList: [], // 表格选中行内容

      // 分页相关
      page: 1,
      pageSize: 40,
      pageTotal: 0,
      pageSizeList: [10, 20, 30, 40],
      // 项目测试上传相关
      testProJectModal: false,
      testRow: {},
      file: null,
      updateLoad: false
    }
  },
  components: {
    filterBoard
  },
  computed: {
  },
  methods: {
    /**
     * 筛选按钮事件
     * @param {params} [Object] 搜索表格所用参数
      */
    screenCondition (params) {
      this.page = 1
      this.condition = params
      this.getTableData()
    },
    /**
     * 清空条件事件
     * @param {params} [Object] 搜索表格所用参数
      */
    clearCondition (params) {
      this.page = 1
      this.condition = params
      this.getTableData()
    },
    setTableColumns () {
      this.tableColumns = [{
        key: 'projectName',
        title: '项目名称'
      }, {
        key: 'projectId',
        title: '项目ID'
      }, {
        key: 'bizType',
        title: '业务场景'
      }, {
        key: 'projectDesc',
        title: '描述'
      }, {
        key: 'updateAt',
        title: '更新时间'
      }, {
        key: 'updateBy',
        title: '更新人'
      }, {
        key: 'createBy',
        title: '创建人'
      }, {
        key: 'option',
        title: '操作',
        width: 220,
        render: (h, { row }) => {
          const self = this
          const Divider = 'Divider'
          return (
            <span>
              <a onClick={ () => self.testProject(row) } >测试</a>
              <Divider type="vertical" />
              <a onClick={ () => self.submitApproval(row) } >提审发布</a>
              <Divider type="vertical" />
              <a onClick={ () => self.toDetail(row) } >编辑</a>
              <Divider type="vertical" />
              <a style={{ color: 'red' }} onClick={ () => self.deleteProject(row) }>删除</a>
            </span>
          )
        }
      }]
    },
    /**
     * 获取表格数据
     * @param {number} [number] 页码
      */
    getTableData (number) {
      const pageParmas = {
        page: number || this.page,
        size: this.pageSize
      }
      const params = Object.assign(pageParmas, this.condition)
      this.tableData = []
      this.noData = '加载中...'
      getProjectList(params).then((res) => {
        if (res.data.code === 2000) {
          this.pageTotal = res.data.data.total
          this.tableData = res.data.data.items
          this.noData = res.data.data.total ? '' : '未查询到数据'
        } else {
          this.$Message.error({
            content: res.data.msg || '加载失败，请重试',
            duration: 4
          })
        }
      })
    },
    // 跳转详情页
    toDetail (row) {
      this.$router.push({
        name: 'project_item_detail',
        params: {
          projectId: row.projectId,
          projectName: row.projectName
        }
      })
    },
    // 提交审批
    submitApproval (row) {

    },
    // 上传前获取文件的钩子
    getUploadData (file) {
      this.file = file
      console.log('============this.file', this.file)
      return false
    },
    // 项目测试
    testProject (row) {
      this.testProJectModal = true
      this.testRow = row
    },
    // 取消样本上传
    cancelUpload () {
      this.file = null
      this.testProJectModal = false
    },
    // 确定样本上传
    certainUpload () {
      if (!this.file) {
        this.$Message.warning({
          content: '请先选择待上传的文件',
          duration: 5
        })
        return
      }
      this.updateLoad = true
      const path = {
        projectId: this.testRow.projectId
      }
      const formData = new FormData()
      formData.append('file', this.file)
      testProject(path, formData).then((res) => {
        console.log('-------res', res)
      })
    },
    // 删除项目按钮
    deleteProject (row) {
      this.$Modal.confirm({
        title: '删除项目',
        content: '<p>确定删除此项目？</p>',
        onOk: () => {
          this.deleteProjectApi(row)
        }
      })
    },
    // 删除项目接口
    deleteProjectApi (row) {
      const params = {
        projectId: row.projectId
      }
      deleteProjectById(params).then((res) => {
        showMessageTip(this, res.data.code, '删除成功', res.data.msg || '删除失败，请重试')
        this.getTableData()
      })
    },
    // 创建新项目
    createProject () {
      this.$router.push({
        name: 'project_item_detail',
        params: {
          // 新增操作时添加标识字段'_create'
          projectId: '_create'
        }
      })
    }
  },
  mounted () {
    this.setTableColumns()
    this.getTableData()
  }
}
</script>

<style>

</style>
